<!--详情页-->
<template>
  <el-row :gutter="10" style="width: 1200px;margin: 0 auto;">
    <el-col :span="18">
      <el-card>
        <h1 style="color:orange;text-align:center;">{{ content.title }}</h1>
        <p style="color:#666;font-size:12px;text-align:center;">作者: {{ content.nickname }} | 发布时间:
          {{ content.createTime }}
          | 阅读次数:{{ content.viewCount }}</p>
        <hr>
        <div v-if="content.type!=2">
          <el-card>
            <span style="color:#0aa1ed;font-weight:bold;">摘要:</span>
            {{ content.brief }}
          </el-card>
          <div v-html="content.content"></div>
        </div>
        <div v-else>
          <video :src="'http://localhost:8080'+content.videoUrl"
                 controls type="video/mp4" style="width:100%;"></video>
        </div>
      </el-card>
      <!--评论相关开始-->
      <el-card style="margin-top:10px;">
        <p>发一条友善的评论</p>
        <hr>
        <el-row :gutter="10">
          <el-col :span="22">
            <el-input placeholder="想不想说点啥?"
                      v-model="comment.content" @keydown.enter="post()"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button @click="post()">发布</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top:10px;" v-for="item in commentArr">
          <el-col :span="2">
            <el-avatar style="margin: 10px;"><img :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
          </el-col>
          <el-col :span="22">
            <p style="color:orange;font-weight:bold;margin:0;font-size:15px;">{{ item.nickname }}</p>
            <p style="margin:2px 0;font-size:12px;">{{ item.content }}</p>
            <p style="font-size:12px;color:#666;margin:0;">{{ item.createTime }}</p>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <!-- 详情页右侧部分   -->
    <el-col :span="6">
      <el-card>
        <div id="head-div"></div>
        <div style="text-align:center;position:relative;bottom:45px;">
          <el-avatar :size="90" :src="'http://localhost:8080'+content.userImgUrl"
                     style="border:5px solid #fff;"></el-avatar>
          <p style="font-size:20px;font-weight:bold;margin:5px 0;">{{ content.nickname }}</p>
          <el-icon class="head-icon">
            <Edit/>
          </el-icon>
          <span>本文作者</span>
          <br>
          <el-icon class="head-icon">
            <Clock/>
          </el-icon>
          <span>{{ content.createTime }}</span>
        </div>
      </el-card>

      <el-card style="margin-top:10px;">
        <h2>热门文章</h2>
        <hr>
        <el-row :gutter="10" v-for="item in hotArr">
          <el-col :span="10">
            <router-link :to="'/detail?id='+item.id">
              <img :src="'http://localhost:8080'+item.imgUrl" style="width:100%;">
            </router-link>
          </el-col>
          <el-col :span="14">
            <router-link :to="'/detail?id='+item.id">
              <p class="title_p">{{ item.title }}</p>
            </router-link>
            <p style="color:#666;font-size:12px;margin:0;">{{ item.createTime }}</p>
          </el-col>
        </el-row>
      </el-card>

      <el-card style="margin-top:10px;">
        <h2>作者其它文章</h2>
        <hr>
        <el-row :gutter="10" v-for="item in otherArr">
          <el-col :span="10">
            <router-link :to="'/detail?id='+item.id">
              <img :src="'http://localhost:8080'+item.imgUrl" style="width:100%;">
            </router-link>
          </el-col>
          <el-col :span="14">
            <router-link :to="'/detail?id='+item.id">
              <p class="title_p">{{ item.title }}</p>
            </router-link>
            <p style="color:#666;font-size:12px;margin:0;">{{ item.createTime }}</p>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//1.定义对象保存详情数据
const content = ref({});
const otherArr = ref([]);
const hotArr = ref([]);
const comment = ref({content: '', userId: '', contentId: ''});
const commentArr = ref([]);

//加载评论的方法
const loadComments = (id) => {
  axios.get(' http://localhost:8080/v1/comments/' + id).then((response) => {
    if (response.data.code == 2001) {
      commentArr.value = response.data.data;
      console.log(commentArr.value);
    }
  })
}

const post = () => {
  let user = localStorage.user ? JSON.parse(localStorage.user) : null;
  if (user == null) {
    alert('请先登录!');
    return;
  }
  if (comment.value.content == '') {
    ElMessage.error('请输入评论内容!');
    return;
  }
  comment.value.userId = user.id;
  comment.value.contentId = content.value.id;
  let data = qs.stringify(comment.value);
  axios.post('http://localhost:8080/v1/comments/add-new', data)
      .then((response) => {
        if (response.data.code == 2001) {
          ElMessage.success('评论成功!');
          //评论列表一会做了才显示
          loadComments(content.value.id);
          //评论完成后清空输入框的数据
          comment.value.content = '';
        }
      })
}


const initData = () => {
  //3.获取文章id
  let id = new URLSearchParams(location.search).get("id");
  //加载评论列表
  loadComments(id);
  //4.给后端发请求获取文章详情
  axios.get('http://localhost:8080/v1/contents/' + id + '/detail')
      .then((response) => {
        if (response.data.code == 2001) {
          content.value = response.data.data;
          //这里请求到用户id后，再给后端发请求，获取作者的其它文章
          axios.get('http://localhost:8080/v1/contents/' + content.value.userId + '/other')
              .then((response) => {
                if (response.data.code == 2001) {
                  otherArr.value = response.data.data;
                }
              })
        }
      })

  //发请求获取热门文章数据
  axios.get('http://localhost:8080/v1/contents/hot')
      .then((response) => {
        if (response.data.code == 2001) {
          hotArr.value = response.data.data;
        }
      })
}

//2.页面跳转过来立即执行 A-->B
onMounted(() => {
  initData();
})
//3.从本页面跳到本页面也需要初始化数据 A-->A
onBeforeUpdate(() => {
  initData();
})

</script>

<style scoped>
.title_p {
  height: 40px;
  margin-top: 0px;
  /*设置文章标题为2行，溢出部分替换成省略号 以下为组合代码 缺一不可*/
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置显示的行数*/
  -webkit-box-orient: vertical; /*纵向排列*/

  color: orange;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  font-weight: bold;
  color: orange;
}

#head-div {
  height: 90px;
  background-image: url("/public/imgs/avarbg.jpg");
}

.head-icon {
  color: orange;
  font-weight: bold;
  position: relative;
  top: 3px;
  right: 5px;
}
</style>